<template>
  <div id="app">
    <TopNav v-if="!$route.meta.hideHead"></TopNav>
    <Play
      :musicList="musicList"
      :playMusice="playMusice"
      @play="changeMusic"
    ></Play>
    <!-- <transition
      enter-active-class="animate__animated  animate__backInRight"
      leave-active-class="animate__animated  animate__backOutRight"
    > -->

    <router-view @play="playMusic"></router-view>
    <!-- </transition> -->
  </div>
</template>
<script>
import TopNav from "@/components/TopNav";
import Play from "@/components/Play";

export default {
  data() {
    return {
      // showNav: true,
      musicID:null,
      playMusice:null,
      musicList:[],
    };
  },
  watch: {
    // $route(e) {
    //   if (e.name == "RecommendList") {
    //     this.showNav = false;
    //   } else {
    //     this.showNav = true;
    //   }
    // },
  },
  components: {
    TopNav,
    Play
  },
  methods:{
    changeMusic(e){
      this.playMusice=e
    },
    playMusic(musice){
      // console.log(musice)
      if(!musice.picUrl){
        if(musice.al&&musice.al.picUrl){
          musice.picUrl=musice.al.picUrl
        }else{
          // if(!musice.picUrl){
          // musice.picUrl='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=399852722,2471137802&fm=26&gp=0.jpg'
          musice.picUrl='./cd.png'
        }
      }
      if(!musice.artists){
        musice.artists=musice.ar
      }
      if(musice.song&&musice.song.artists){
        musice.artists=musice.song.artists;
      }
      this.playMusice=musice;
      let exit=false;
      for(let i=0;i<this.musicList.length;i++){
        if(this.musicList[i].id==musice.id){
          exit=true;
          break;
        }
      }
      if(!exit){
        this.musicList.push(musice)
      }
      // console.log(musice)
    }

  },
  created() {},
};
</script>
<style>
#app {
  padding-top: 40px;
  padding-bottom: 40px;
}
</style>
